<template>
  <div class="mood-history">
    <nav-back />
    <div class="list" v-if="!loading">
      <div
        v-for="(v,i) in list"
        :key="i"
        class="history-item"
      >
        <span class="date">{{v.date}}</span>
        <div class="content">
          <p class="icons">
            <span class="weather" :style="{backgroundImage:`url('${v.weather}')`}"></span>
            <span class="mood" :style="{backgroundImage:`url('${v.mood}')`}"></span>
          </p>
          <p class="article">建设的io偶极.,凡违反飞蛾哦今晚i非i嗯我就覅是的发生地哦附件金佛文件.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { getWeatherObj, getMoodIcon } from '@/tools'
import { NavBack } from '@/components'

const { mapState, mapActions } = createNamespacedHelpers('Mood')
export default {
  name: 'mood-history',
  components: { NavBack },
  computed: {
    ...mapState({
      moodList: state => state.moodHistory,
      loading: state => state.moodHistoryLoading
    }),
    list() {
      return this.moodList.map(v => ({
        ...v,
        weather: getWeatherObj(v.weatherCode).icon,
        mood: getMoodIcon(v.moodCode).iconActive
      }))
    }
  },
  methods: { ...mapActions(['getHistoryMood']) },
  mounted() {
    this.getHistoryMood()
  }
}
</script>

<style lang="stylus">
$icon-size = 36px;
$circle-size = 15px;
$circle-padding = 24px;
$item-padding = 50px;

.mood-history {
  min-height: 100vh;
  background-color: #fff;

  .list {
    position: relative;
    padding: 16px;
    padding-left: $circle-padding;
  }

  .history-item {
    position: relative;
    margin-left: $circle-padding;
  }

  .history-item:not(:first-child) {
    padding-top: $item-padding;
  }

  .history-item:first-child {
    &::after {
      position: absolute;
      left: -1 * $circle-padding;
      top: 0;
      content: '';
      width: 1px;
      height: $item-padding + 10;
      background-color: $border-color;
    }
  }

  .history-item:not(:last-child) {
    &::before {
      position: absolute;
      left: -1 * $circle-padding;
      top: $item-padding + 10;
      content: '';
      width: 1px;
      height: 100%;
      background-color: $border-color;
    }
  }

  .date {
    position: relative;
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 120%;
    line-height: 20px;

    &::after {
      position: absolute;
      top: 50%;
      left: -1 * $circle-padding;
      z-index: 2;
      content: '';
      width: $circle-size;
      height: $circle-size;
      background-color: #fff;
      border: 2px solid $main-color;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .article {
    flex: 1;
    font-size: 120%;
    line-height: 1.5;
  }

  .icons {
  }

  .weather {
    display: inline-block;
    width: $icon-size;
    height: $icon-size;
    margin: 0 auto;
    background: center / cover no-repeat;
  }

  .mood {
    display: inline-block;
    width: $icon-size;
    height: $icon-size;
    border-radius: 50%;
    overflow: hidden;
    background: center top / cover no-repeat;
  }
}
</style>
